<template>
	<scroll-view scroll-y style="max-height: 1200rpx;">
		<view class="cardbox" v-if="stepStatus === 2">
			<view class="box">
				<view class="item" v-for="item,index in list" :class="{ selected: isAnswered(item.id) }" @click="stepStatus = 1, currentIndex = index">{{index + 1}}</view>
			</view>
		</view>
		<view class="bottombox" v-else>
			<template v-for="item,index in list">
				<template v-if="currentIndex === index">
					<view class="title text-28">
						<view class="number mr-5"><text>{{index + 1}}</text>/{{list.length}}</view>{{item.stem}}
					</view>
					<view 
						class="optionitem" 
						v-for="option,keys in item.option" 
						:class="[
							isSelected(item.id, option.prefix) ? 'selected' : '',
							rightAnswerEvent(item, useranswerlist, option)
						]" 
						@click="toggleSelection(item.id, option.prefix, item.type?.value)"
					>
						<view class="number">{{option.prefix}}</view>
						<view class="font">{{option.content}}</view>
					</view>
					<view v-if="read" class="text-28 text-gray mt-30">
						<view>
							<view>正确答案</view>
							<view class="mt-10 text-32" style="color: #1ee30d;">{{item.rightAnswer.join('、')}}</view>
						</view>
						<view class="mt-20">
							<view>详细解析</view>
							<rich-text class="mt-10 text-black" :nodes="item.analysis"></rich-text>
						</view>
					</view>
				</template>
			</template>
		</view>
	</scroll-view>
	<view class="flex items-center justify-between bottombox" >
		<template v-if="read">
			<view class="btn bgc-primary" @click="prevQuestion" v-if="currentIndex > 0">上一题</view>
			<view class="btn bgc-primary" @click="nextQuestion" v-if="currentIndex < list.length - 1">下一题</view>
		</template>
		<template v-else>
			<template v-if="stepStatus === 1">
				<view class="btn bgc-primary" @click="prevQuestion" v-if="currentIndex > 0">上一题</view>
				<view class="btn bgc-primary" @click="nextQuestion" v-if="currentIndex < list.length - 1">下一题</view>
				<view class="btn bgc-primary" @click="stepStatus = 2" v-else>提交</view>
			</template>
			<view class="btn bgc-primary" @click="submit" v-else>提交</view>
		</template>
	</view>
</template>

<script setup>
import { reactive, ref } from 'vue'
const props = defineProps({
	list: {
		type: Array,
		default: []
	},
	read: Boolean,
	useranswerlist: {
		type: Array,
		default: []
	}
})

const emit = defineEmits(['submit'])

const currentIndex = ref(0)
const translateX = ref(0)

const swiperContainerRef = ref()

const answerslist = reactive([])
const selectedStatus = reactive({}); // 存储选中状态的对象

function prevQuestion() {
	if (currentIndex.value > 0) {
		currentIndex.value--;
	}
}
function nextQuestion() {
	if (currentIndex.value < props.list.length - 1) {
		currentIndex.value++;
	}
}

function isAnswered(id) {
    return answerslist.some(answer => answer.id === id);
}

function isSelected(id, prefix) {
	return selectedStatus[id] && selectedStatus[id].includes(prefix);
}

function toggleSelection(id, prefix, type) {
	if(props.read) return false
	const existingIndex = answerslist.findIndex(answer => answer.id === id);
	if (existingIndex !== -1) {
		const existingAnswer = answerslist[existingIndex].answer;
		if (type === 2) {
			if (!existingAnswer.includes(prefix)) {
				existingAnswer.push(prefix);
			} else {
				existingAnswer.splice(existingAnswer.indexOf(prefix), 1); // 取消选中
			}
		} else {
			existingAnswer.splice(0, existingAnswer.length);
			existingAnswer.push(prefix);
		}
		answerslist[existingIndex].answer = existingAnswer;
		selectedStatus[id] = existingAnswer; // 更新选中状态的对象
	} else {
		answerslist.push({ id: id, answer: [prefix] });
		selectedStatus[id] = [prefix]; // 更新选中状态的对象
	}
}

function rightAnswerEvent(questionItem, userAnswers, option) {
	if(!props.read) return false
    const correctAnswer = questionItem.rightAnswer;
    if (!correctAnswer || !correctAnswer.length) return '';
    const correctAnswers = correctAnswer.map(prefix => prefix.toUpperCase());
    const userAnswer = userAnswers.find(answer => parseInt(answer.id) === questionItem.id)?.answer || [];

    let optionStyle = '';
    const optionPrefix = option.prefix.toUpperCase();
    if (correctAnswers.includes(optionPrefix)) {
        optionStyle += ' correct';
    } else if (userAnswer.includes(optionPrefix)) {
        optionStyle += ' wrong';
    }
    return optionStyle.trim();
}




function submit(){
	emit('submit', answerslist)
}

const stepStatus = ref(1)
</script>


<style lang="scss" scoped>
.bottombox{padding: 20rpx 32rpx;}
.btn{height: 80rpx; border-radius: 12rpx; flex: 1; text-align: center; line-height: 80rpx; color: #fff; font-size: 28rpx; display: flex; align-items: center; justify-content: center;}
.btn+.btn{margin-left: 20rpx;}	
.title .number{font-size: 26rpx; background: theme1; display: inline-flex;}
.optionitem{border: 1px solid #0B9AFF; padding: 30rpx 25rpx; display: flex; border-radius: 10rpx; margin-top: 30rpx;}
.optionitem .number, .cardbox .box .item{width: 60rpx; height: 60rpx; background-color: #fff; border-radius: 100%; border: 2rpx solid #0B9AFF;line-height: 56rpx; text-align: center; font-size: 26rpx;}
.optionitem .font{font-size: 30rpx; margin-left: 20rpx; line-height: 60rpx; flex: 1; min-width: 0;}
.optionitem.selected {
	background-color: rgba(11, 154, 255, 0.1);
	.number{
		background-color: #0B9AFF; color: #fff;
	}
}
.optionitem.correct{
	background-color: rgba(#1ee30d, 0.3);
	border-color: #1ee30d;
	.number{
		background-color: rgba(#1ee30d, 0.1); color: #fff;border-color: #1ee30d;
	}
}
.optionitem.wrong{
	background-color: rgba(#da0017, 0.3);
	border-color: #da0017;
	.number{
		background-color: rgba(#da0017, 0.1); color: #fff;border-color: #da0017;
	}
}

.cardbox{
	padding: 30rpx 32rpx 40rpx;
}
.cardbox .box {
    display: flex;
	flex-wrap: wrap;
	.item{
		margin-right: 20rpx;
		&.selected{
			background-color: #0B9AFF; color: #fff;
		}
	}
}
</style>